<template>
  <div>
    <!-- 点位管理 -->
    <el-row class="header">
      <el-col :span="24">
        <span>点位搜索</span>
        <el-input v-model="query.name" placeholder="请输入" style="width:220px" />
        <span>区域搜索</span>
        <el-select v-model="query.regionId" placeholder="请选择">
          <el-option
            v-for="item in toto"
            :key="item.name"
            :label="item.region.name"
            :value="item.regionId"
          />
        </el-select>
        <el-button class="but" type="primary" icon="el-icon-search" @click="cha">查询</el-button>
      </el-col>
    </el-row>
    <el-button class="XinJian" type="primary" icon="el-icon-circle-plus-outline" @click="zeng('add')">新建</el-button>
    <!-- <DianWei :dialog-form-visible.sync="dialogFormVisible" :form-visible.sync="formVisible" :body="body" :mm="mm" :mum="mum" /> -->
    <el-table
      class="style"
      :data="toto"
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="序号"
        width="100"
        type="index"
        :index="hIndex"
      />
      <el-table-column
        prop="name"
        label="点位名称"
        width="200"
      />
      <!-- region.name -->
      <el-table-column

        prop="region.name"
        label="所在区域"
        width="200"
      />
      <!-- businessType.name -->
      <el-table-column
        prop="businessType.name"
        label="商圈类型"
        width="200"
      />
      <el-table-column
        prop="ownerName"
        label="合作商"
        width="240"
      />
      <el-table-column
        prop="addr"
        label="详细地址"
        width="250"
      />
      <el-table-column
        prop=""
        label="操作"
        width="150"
      >
        <template #default="{row}">
          <el-button type="text" size="small" @click="handleClick(row)">查看详情</el-button>
          <el-button type="text" size="small" @click="zeng('cdd', row)">修改</el-button>
          <el-button type="text" size="small" style="color: red" @click="del(row.id)">删除</el-button>

        </template></el-table-column>
    </el-table>

    <div class="v">
      <el-button v-if="tableData.length/10 === 1 " type="primary" @click="xia">下一页</el-button>
      <el-button v-if="query.pageIndex !== 1" type="primary" @click="shang">上一页</el-button>
    </div>
    <el-dialog title="点位详情" :visible="formVisible" class="el" @close="clo">

      <el-table
        :data="today"

        class="bao"
      >

        <el-table-column
          prop=""
          label="序号"
          width="140"
          type="index"
        />
        <el-table-column
          prop="innerCode"
          label="机器编号"
          width="180"
        />
        <el-table-column
          prop="vmStatus"
          label="设备状态"
          width="180"
        >
          <template #default="{row}">
            <span>{{ row.vmStatus === 0 ? '未投放' : row.vmStatus === 1 ? "运营" : "撤机" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lastSupplyTime"
          label="最后一次供货时间"
          width="180"
        />
      </el-table>
    </el-dialog>
    <el-dialog title="新增点位" :visible="dialogFormVisible" @close="close">
      <div class="div">
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="点位名称：" prop="name">
            <el-input v-model="form.name" class="yi" autocomplete="off" placeholder="请输入" maxlength="15" show-word-limit />
          </el-form-item>
          <el-form-item label="所在区域：" prop="regionId">
            <el-select v-model="form.regionId" placeholder="请选择" class="yi">
              <el-option
                v-for="item in aa"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="所属商圈：" prop="businessId">
            <el-select v-model="form.businessId" placeholder="请选择" class="yi">
              <!-- businessType.name -->
              <el-option
                v-for="item in bb"
                :key="item.id"
                :label="item.name"

                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="归属合作商:" prop="ownerName">
            <el-select v-model="form.ownerName" placeholder="请选择" class="yi">
              <el-option
                v-for="item in cc"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />

            </el-select>

          </el-form-item>
          <el-form-item label="详细地址：" prop="">
            <!-- <el-select v-model="form.addr" placeholder="请选择" class="yi" /> -->
            <el-cascader
              v-model="selectedOptions"
              size="large"
              :options="options"
              @change="addressChange"
            />
          </el-form-item>
          <el-form-item label="" prop="addr">
            <el-input v-model="form.addr" type="textarea" :rows="4" class="input" autocomplete="off" placeholder="请输入详细地址" maxlength="60" show-word-limit />
          </el-form-item>
          <el-form-item>
            <el-button class="it" @click="dia">取 消</el-button>
            <el-button type="primary" class="em" @click="dialog">确 定</el-button>

          </el-form-item>
        </el-form>
      </div>

    </el-dialog>
  </div>
</template>

<script>
// import DianWei from './components/DiAnwei.vue'
import { regionData, CodeToText } from 'element-china-area-data'
import { xuan, xu, dianxiang, xiuwei, xinwei, QuYu, lie, getShoppingList } from '@/api/point'
export default {
  name: 'Dianwei',
  // components: {
  //   DianWei
  // },

  props: {
  },
  data() {
    return {

      options: regionData,

      selectedOptions: [],
      today: [],
      toto: [],
      form: {
        // areaCode: '',
        name: null,
        regionId: null,
        // regionname: '',
        businessId: null,
        // businessname: '',
        ownerName: null,
        addr: null
      },
      rules: {
        name: [{ required: true, message: '请快点输入', trigger: 'blur' }],
        regionId: [{ required: true, message: '请快点输入', trigger: 'blur' }],
        businessId: [{ required: true, message: '请快点输入', trigger: 'blur' }],
        ownerName: [{ required: true, message: '请快点输入', trigger: 'blur' }],
        addr: [{ required: true, message: '请快点输入', trigger: 'blur' }]

      },
      mum: null,
      mm: null,
      body: [],
      total: null,
      tableData: [],
      query: {
        pageIndex: 1,
        pageSize: 10,
        // Content-Type:application,
        name: null,
        regionId: ''
      },
      formVisible: false,
      dialogFormVisible: false,
      aa: [],
      bb: [],
      cc: [],
      to: []
    }
  },
  created() {
    this.indata()
  },

  methods: {
    addressChange(arr) {
      console.log(arr)
      console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]])
    },

    clo() {
      this.formVisible = false
    },
    close() {
      this.$refs.form.resetFields()

      this.dialogFormVisible = false
    },
    async dialog() {
      if (this.mm === 'cdd') {
        this.form.id = this.mum.id
        await xiuwei(this.form)
        this.indata()
        this.$message({
          message: '修改成功',
          type: 'success',
          offset: 100
        })
        this.dialogFormVisible = false
      } else {
        const luo = this.cc.find(item => item.name === this.form.ownerName)
        // console.log(luo)
        this.form.ownerId = luo.id
        // const a = this.tableData.find(item => item.ownerName === this.form.ownerName)
        // this.form.ownerId = a[0].ownerId
        this.form.areaCode = '110100'
        this.form.createUserId = '1'
        this.form.addr = '北京市-都昌县-三泽光-' + this.form.addr
        // const b = this.tableData.find(item => item.region.name === this.form.regionname)
        // this.form.regionId = b[0].region.id
        // const c = this.tableData.find(item => item.businessType.name === this.form.businessname)
        // this.form.businessId = c[0].businessType.id
        await this.$refs.form.validate()
        await xinwei(this.form)
        this.$refs.form.resetFields()
        this.dialogFormVisible = false
      }
    },
    dia() {
      // this.form.name = null
      // this.form.regionId = null
      // this.form.businessId = null
      // this.form.ownerName = null
      // this.form.addr = null
      this.dialogFormVisible = false
    },
    hIndex(index) {
      this.query.pageIndex <= 0 ? this.query.pageIndex = 1 : this.query.pageIndex
      if (this.query.pageIndex !== 1) {
        index + 1 + ((this.query.pageIndex - 1) * this.query.pageSize)
        return index + 1 + ((this.query.pageIndex - 1) * this.query.pageSize)
      }
      return index + 1
    },
    xia() {
      this.query.pageIndex++
      this.indata()
    },
    shang() {
      this.query.pageIndex--
      this.indata()
    },
    async zeng(type, id) {
      const dat = await QuYu(this.query)
      this.aa = dat.currentPageRecords
      console.log(this.aa)
      const da = await getShoppingList(this.query)
      this.cc = da.currentPageRecords
      console.log(this.cc)
      const re = await lie(this.query)
      this.bb = re
      console.log(this.bb)
      console.log(re)
      this.dialogFormVisible = true
      this.mm = type
      this.mum = id
      console.log(this.mum)
      if (this.mm === 'cdd') {
        this.form = {
          name: this.mum.name,
          regionId: this.mum.regionId,
          // areaCode: ,
          // regionname: this.mum.region.name,
          businessId: this.mum.businessId,
          // businessname: this.mum.businessType.name,
          ownerName: this.mum.ownerName,
          addr: '北京市-都昌县-三泽光-' + this.mum.addr,
          areaCode: this.mum.areaCode,
          creatUserId: this.mum.creatUserId,
          ownerId: this.mum.ownerId
        }
      } else {
        // this.form.name = null
        // this.form.regionname = null
        // this.form.businessname = null
        // this.form.ownerName = null
        // this.form.addr = nulln
        this.form = {
          name: null,
          regionId: null,
          // areaCode: ,
          // regionname: this.mum.region.name,
          businessId: null,
          // businessname: this.mum.businessType.name,
          ownerName: null,
          addr: null

        }
      }
    },
    async indata() {
      const data = await xuan(this.query)

      this.tableData = data.currentPageRecords
      this.toto = this.tableData.map(item => {
        item.addr = item.addr.substring(12)
        return item
      })
      this.to = this.toto
      console.log(this.query)
      // this.toto = this.tableData.map(item => {
      //   const addrArr = item.addr.split('-')
      //   item.addr = addrArr[addrArr.length - 1]
      //   return item
      // })
      this.total = +data.totalCount
      // console.log(data)
    },
    async cha() {
      const num = await xuan(this.query)
      this.tableData = num.currentPageRecords
      this.toto = this.tableData.map(item => {
        item.addr = item.addr.substring(12)
        return item
      })
      // this.query.regionId = ''
      // this.indata()
    },
    async handleClick(type) {
      const a = await dianxiang(type.id)
      this.today = a
      // this.body = a
      // console.log(a)
      this.formVisible = true
    },

    async del(type) {
      try {
        await xu(type)
        this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success',
          offset: 100
        })
        this.indata()
      } catch (error) {
        if (error.request.status === 500) {
          // console.dir(error)
          this.$notify({
            title: '失败',
            message: '原始数据不能删除',
            type: 'warning',
            offset: 100
          })
        }
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.div{
  margin-left: 80px;
  .it{
    // margin: 0 auto;
    margin-left: 210px;
    margin-right: 10px;
  }
  .em{
    background-color: rgba(255, 137, 58);
    border: none;
  }
  .yi{
    width: 396px;
    height: 36px;
  }
  .input{
    width: 396px;
    height: 100px;
    margin-left: 90px;
  }
}
.style{
   margin-left: 17px;
   width: 100%
}
.header{
  color: rgba(143, 144, 147);
  height: 40px;
  margin-bottom: 40px;
  padding-left: 17px;
  margin-top: 20px;
  span{
    margin-left: 10px;
    margin-right: 20px;
  }
 .but{
    margin-left: 20px;
  }

}
.XinJian{
  background-color: rgba(255, 130, 54) ;
  border: none;
  margin-bottom: 20px;
  margin-left: 17px;
}
.v{
  // width: 500px;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  margin-right: 80px;
}
.el{
  .row{ margin-left: 60px;
  font-weight: 700;
  color: rgba(144, 147, 153);
  .pan{
    margin-right: 30px;
  }
  }
  .bao{
    // margin-left: 50px;
    padding-left: 50px;
  }
  // .di{
  //   // margin-left: 100px;
  //   // margin: 10px 0 20px 100px;
  //   margin-left: 80px;
  //   // margin-top: 40px;
  //   margin-bottom: 30px;
  //   span{
  //     margin-left: 20px;
  //     margin-right: 40px;
  //   }
  // }
}
</style>
